<template>
	<view class="FundRanking">
		<view class="FundRankingNav">
			<view class="FundRankingNav-item" v-for="(item,index) in FundRanking" :key="index">
				<text :class="{'FundRankingNav-Text':true , 'FundRankingNav-Text-active':FundRankingNavText==item?'FundRankingNav-Text-active':''}" @tap='changeText(item)'>{{item}}</text>
				<view :class="{'FundRankingNavHr':FundRankingNavText==item?'FundRankingNavHr':''}"></view>
			</view>
		</view>

		<!-- 基金表格 -->
		<view class="table">
			<view class="firstClo left">
				<view class="title">
					<text>基金名称</text>
				</view>
				<view class="item" v-for="item in contents" :key='item.id'>
					<view class="up">
						<text>{{item.fundsName}}</text>
					</view>
					<view class="down">
						<text>{{item.number}}</text>
					</view>
				</view>
			</view>
			<view class="left main">
				<scroll-view scroll-x="true">
					<view class="content">
						<view class="up">
							<view class="title" v-for="item in headers" :key='item.key'>
								<text>{{item.label}}</text>
							</view>
						</view>
						<view class="down">
							<view class="item" v-for="item in contents" :key='item.number'>
								<view class="cell">{{item.netWorth}}</view>
								<view class="cell" :style="{'color':item.week.includes('+')?'#fb5656':'#2be80e'}">{{item.week}}</view>
								<view class="cell" :style="{'color':item.January.includes('+')?'#fb5656':'#2be80e'}">{{item.January}}</view>
								<view class="cell" :style="{'color':item.March.includes('+')?'#fb5656':'#2be80e'}">{{item.March}}</view>
								<view class="cell" :style="{'color':item.June.includes('+')?'#fb5656':'#2be80e'}">{{item.June}}</view>
								<view class="cell" :style="{'color':item.Ayear.includes('+')?'#fb5656':'#2be80e'}">{{item.Ayear}}</view>
								<view class="cell" :style="{'color':item.Twoyears.includes('+')?'#fb5656':'#2be80e'}">{{item.Twoyears}}</view>
								<view class="cell" :style="{'color':item.Threeyears.includes('+')?'#fb5656':'#2be80e'}">{{item.Threeyears}}</view>
								<view class="cell" :style="{'color':item.establishment.includes('+')?'#fb5656':'#2be80e'}">{{item.establishment}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				FundRankingNavText:'全部',
				FundRanking:['全部','股票型','债券型','混合型','指数型','FOF型','QDll型'],
				// 表格数据
				// 固定表头
				headers: [{
					label: '单位净值',
					key: 'netWorth'
				}, {
					label: '一周收益',
					key: 'week'
				}, {
					label: '一月收益',
					key: 'January'
				}, {
					label: '三月收益',
					key: 'March'
				}, {
					label: '六月收益',
					key: 'June'
				}, {
					label: '一年收益',
					key: 'Ayear'
				}, {
					label: '两年收益',
					key: 'Twoyears'
				}, {
					label: '三年收益',
					key: 'Threeyears'
				}, {
					label: '成立以来',
					key: 'establishment'
				}],
				// 表格内动态数据
				contents: [{
					fundsName: '金鹰改革红利灵活配置混合',
					number:'001951',
					netWorth: '1.0115',
					week: '+2.92%',
					January: '+22.50%',
					March: '+48.13%',
					June:'+40.25%',
					Ayear:'+61.86%',
					Twoyears:'+248.43%',
					Threeyears:'+264.86%',
					establishment:'+256.10%'
				}, {
					fundsName: '交银中证环境治理指数LOF',
					number:'164908',
					netWorth: '0.5110',
					week: '+0.78%',
					January: '+3.20%',
					March: '+2.38%',
					June:'+9.09%',
					Ayear:'+5.09%',
					Twoyears:'-1.15%%',
					Threeyears:'-15.96%',
					establishment:'-48.80%'
				}, {
					fundsName: '交银中证环境治理指数LOF',
					number:'164908',
					netWorth: '0.5110',
					week: '+0.78%',
					January: '+3.20%',
					March: '+2.38%',
					June:'+9.09%',
					Ayear:'+5.09%',
					Twoyears:'-1.15%%',
					Threeyears:'-15.96%',
					establishment:'-48.80%'
				}],
			}
		},
		methods: {
			changeText(data){
				this.FundRankingNavText=data
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.FundRanking {
		width: 100vw;
	}

	.FundRankingNav {
		width: 100vw;
		white-space: nowrap;
		overflow: scroll;
		padding: 30rpx 0;
		margin-bottom: 20rpx;
	}

	.FundRankingNav::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	.FundRankingNav-item {
		display: inline-block;
		text-align: center;
		width: 144rpx;
	}

	.FundRankingNav-Text {
		font-size: 28rpx;
		color: #999;
	}

	.FundRankingNav-Text-active {
		font-size: 32rpx;
		color: #3476f1;
	}

	.FundRankingNavHr {
		width: 32rpx;
		height: 0;
		border: 3rpx solid #3476f1;
		margin: 10rpx auto 0;
	}
	.table {
		width: 100vw;
		display: flex;
		.left {
			display: flex;
			flex-direction: column;
		}
		.firstClo {
			width: 230rpx;
			.title {
				line-height: 100rpx;
				font-size: 24rpx;
				color: #999;
			}
	
			.title,
			.item {
				height: 100rpx;
				padding: 0rpx 24rpx;
				border: 1rpx solid #f5f5f5;
				border-left: none;
				box-sizing: border-box;
			}
	
			.item {
				border-top: none;
			}
	
			.up {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1; //三行多出隐藏 支持内核受限制
				-webkit-box-orient: vertical;
				color: #333;
				font-size: 28rpx;
				margin-top: 5rpx;
			}
	
			.down {
				color: #999;
				font-size: 24rpx;
				margin-top: 5rpx;
			}
		}
		.main{
			width: 515rpx;
			box-sizing: border-box;
		}
		.content {
			.up {
				display: flex;
				.title {
					box-sizing: border-box;
					height: 100rpx;
					min-width: 200rpx;
					text-align: center;
					font-size: 24rpx;
					color: #999;
					line-height: 100rpx;
					border-top: 1rpx solid #f5f5f5;
					border-bottom: 1rpx solid #f5f5f5;
				}
			}
			.down{
				.item{
					display: flex;
					.cell{
						box-sizing: border-box;
						height: 100rpx;
						min-width: 200rpx;
						text-align: center;
						font-size: 24rpx;
						color: #fb5656;
						line-height: 100rpx;	
						border-bottom: 1rpx solid #f5f5f5;
						// border-right: none;
						// border-left: none;
					}
					.cell:nth-child(1){
						color: #333;
					}
				}
			}
		}
	}
</style>
